<template>
  <div class="contentTop">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="commonHeightTop contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              工资代发
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="12" class="salaryBox">
                <p>
                  <span class="markStyle markBg"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >工资发放总额</span
                  >
                </p>
                <p>
                  <span class="markStyle markBgO"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >工资代发人次</span
                  >
                </p>
                <p>
                  <span class="markStyle markBgT"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >按月代发项目比例</span
                  >
                </p>
              </el-col>
              <el-col :span="12" class="salaryDataBox">
                <p class="numColor comFontSize">
                  {{ salaryList.totalPaidMoney }}万元
                </p>
                <p class="numColor comFontSize">
                  {{ salaryList.totalPaidTimes }}人次
                </p>
                <p class="numColor comFontSize">{{ salaryList.monthScale }}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="commonHeightTop contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              工程款支付担保
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="13">
                <div class="RealNameBox">
                  <div class="comSinFontSize fontColor">支付担保项目数</div>
                  <div class="numColor maxNum">{{ payList.payNum }}</div>
                </div>
                <div class="realNameProportion">
                  <span class="markStyle markBgO"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >支付担保比例</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ payList.payProportion }}%</span
                  >
                </div>
              </el-col>
              <el-col :span="9" class="projectFigure">
                <div
                  id="salaryFigure"
                  class="statistic"
                  style="position: relative"
                ></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="commonHeightTop contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              其他
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%">
            <el-row>
              <el-col :span="8">
                <div class="otherBg">
                  <div>
                    <img
                      src="../../../static/img/dataOverView/deposit.png"
                      alt=""
                      class="otherPicSty"
                    />
                    <div class="sinFontColor comSinFontSize medSinSize">
                      保证金缴存比例
                    </div>
                    <div
                      class="maxNum medMaxSize medSty"
                      style="color: #53ffac"
                    >
                      {{ marginList.inScale }}
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="otherBg">
                  <div>
                    <img
                      src="../../../static/img/dataOverView/useMargin.png"
                      alt=""
                      class="otherPicSty"
                    />
                    <div class="sinFontColor comSinFontSize medSinSize">
                      保证金动用比例
                    </div>
                    <div
                      class="maxNum medMaxSize medSty"
                      style="color: #26bbff"
                    >
                      {{ marginList.outScale }}
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="otherBg">
                  <div>
                    <img
                      src="../../../static/img/dataOverView/publicSign.png"
                      alt=""
                      class="otherPicSty"
                    />
                    <div class="sinFontColor minNum medSinSize">
                      维权公示牌上传比例
                    </div>
                    <div class="maxNum medMaxSize" style="color: #ffcc03">
                      {{ marginList.psScale }}
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'overViewCenter',
  data() {
    return {
      salaryList: {},
      payList: {},
      marginList: {},
      areaName: this.area,
      investmentType: this.investmentType,
      chartRealName: '',
    }
  },
  props: {
    area: {
      type: String,
      default: false,
    },
    investmentType: {
      type: String,
      default: false,
    },
  },
  activated() {
    // 解决其他页面浏览器放大缩小，切换到本页面echarts不显示的问题
    if (this.chartRealName) {
      setTimeout(() => {
        this.chartRealName.resize()
      }, 100)
    }
  },
  created() {},
  mounted() {
    // 获取工资代发数据
    this.getSalaryData()
    this.getPay()
    this.getOther()
  },
  watch: {
    area(newValue, oldValue) {
      this.area = newValue
      this.areaName = newValue
      this.getSalaryData()
      this.getPay()
      this.getOther()
    },
    investmentType(newValue, oldValue) {
      this.investmentType = newValue
      this.getSalaryData()
      // this.getSalary();
      this.getOther()
      this.getPay()
    },
  },
  methods: {
    // 获取工资代发
    getSalaryData() {
      this.axios({
        method: 'post',
        url: '/api-p/projectstats/expand/projectsalarystats',
        data: {
          areaId: this.areaName,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.salaryList = resp.data.result
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    // 获取工程款支付担保
    getPay() {
      var hosts = window.location.host
      var protocol = document.location.protocol
      let host
      if (hosts.indexOf('localhost') != -1) {
        host = protocol + '//' + hosts + '/static/'
      } else {
        host = '/static/'
      }
      this.axios.get(host + 'js/dataJson/realNameData.json').then((res) => {
        if (this.areaName == '4228' && this.investmentType == '') {
          this.payList = res.data.EsPayData.allType
        } else if (this.areaName == '4228' && this.investmentType == 'GOV') {
          this.payList = res.data.EsPayData.govIn
        } else if (this.areaName == '422801' && this.investmentType == '') {
          this.payList = res.data.EsCityPay.allType
        } else if (this.areaName == '422801' && this.investmentType == 'GOV') {
          this.payList = res.data.EsCityPay.govIn
        }
        this.getSalary()
      })
    },
    // 获取其他
    getOther() {
      this.axios({
        method: 'post',
        url: '/api-p/projectstats/expand/otherstats',
        data: {
          areaId: this.areaName,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.marginList = resp.data.result
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    // getSalaryData() {
    //     this.axios.get("http://localhost:8090/static/js/dataJson/realNameData.json")
    //     .then(res => {
    //         if(this.areaName == "全国" && this.investmentType == "全部") {
    //             this.salaryList = res.data.allSalary.allType;
    //             this.payList = res.data.allPay.allType;
    //             this.marginList = res.data.allMargin.allType;
    //         }else if(this.areaName == "全国" && this.investmentType == "政府投资") {
    //             this.salaryList = res.data.allSalary.govIn;
    //             this.payList = res.data.allPay.govIn;
    //             this.marginList = res.data.allMargin.govIn;
    //         }else if(this.areaName == "湖北省" && this.investmentType == "全部") {
    //             this.salaryList = res.data.hbSalary.allType;
    //             this.payList = res.data.hbPay.allType;
    //             this.marginList = res.data.hbMargin.allType;
    //         }else if(this.areaName == "湖北省" && this.investmentType == "政府投资") {
    //             this.salaryList = res.data.hbSalary.govIn;
    //             this.payList = res.data.hbPay.govIn;
    //             this.marginList = res.data.hbMargin.govIn;
    //         }else if(this.areaName == "武汉市" && this.investmentType == "全部") {
    //             this.salaryList = res.data.whSalary.allType;
    //             this.payList = res.data.whPay.allType;
    //             this.marginList = res.data.whMargin.allType;
    //         }else if(this.areaName == "武汉市" && this.investmentType == "政府投资") {
    //             this.salaryList = res.data.whSalary.govIn;
    //             this.payList = res.data.whPay.govIn;
    //             this.marginList = res.data.whMargin.govIn;
    //         }else if(this.areaName == "恩施土家族苗族自治州" && this.investmentType == "全部") {
    //             this.salaryList = res.data.esSalary.allType;
    //             this.payList = res.data.esPay.allType;
    //             this.marginList = res.data.esMargin.allType;
    //         }else if(this.areaName == "恩施土家族苗族自治州" && this.investmentType == "政府投资") {
    //             this.salaryList = res.data.esSalary.govIn;
    //             this.payList = res.data.esPay.govIn;
    //             this.marginList = res.data.esMargin.govIn;
    //         }else if(this.areaName == "云南省" && this.investmentType == "全部") {
    //             this.salaryList = res.data.ynSalary.allType;
    //             this.payList = res.data.ynPay.allType;
    //             this.marginList = res.data.ynMargin.allType;
    //         }else if(this.areaName == "云南省" && this.investmentType == "政府投资") {
    //             this.salaryList = res.data.ynSalary.govIn;
    //             this.payList = res.data.ynPay.govIn;
    //             this.marginList = res.data.ynMargin.govIn;
    //         }
    //         this.getSalary();

    //     })
    //     .catch(error => {
    //       this.$message({
    //         message: "获取数据失败",
    //         type: "error"
    //       });
    //     });
    // },
    getSalary() {
      this.$nextTick(() => {
        this.chartRealName = this.$echarts.init(
          document.getElementById('salaryFigure')
        )
        var temp = [
          {
            value: this.payList.payProportion,
            name: '支付担保比例',
          },
          {
            value: 100 - this.payList.payProportion,
            name: '未支付担保比例',
          },
        ]
        var centerData = ''
        if (this.payList.payProportion) {
          centerData = this.payList.payProportion
        }
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}:{d}%',
          },
          color: ['#26BBFF', '#1C405B'],
          series: [
            {
              name: '工程款支付担保',
              type: 'pie',
              radius: ['40%', '55%'],
              label: {
                normal: {
                  position: 'inner',
                  show: false,
                },
              },
              data: temp,
            },
          ],
          graphic: [
            {
              type: 'text',
              left: 'center',
              top: '47%',
              z: 10,
              zlevel: 10,
              style: {
                text: centerData + '%',
                fill: '#53FFAC',
                textAlign: 'center',
                font: 'small-caps 12px/1 sans-serif',
              },
            },
          ],
        }
        this.chartRealName.setOption(option)
        window.addEventListener('resize', () => {
          this.chartRealName.resize()
        })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.contentTop {
  height: calc(25% - 20px);
  margin-top: 10px;
  .el-row {
    height: calc(100%);
    .el-col {
      height: calc(100%);
    }
  }
}
.commonHeightTop {
  height: calc(100%);
}
.contentBg {
  background: rgba(29, 65, 96, 0.5);
}
.fontColor {
  color: #fff;
}
.comFontSize {
  font-size: 16px;
}
.comSinFontSize {
  font-size: 14px;
}
.sinFontColor {
  color: #7193b2;
}
.numColor {
  color: #53ffac;
}
.maxNum {
  font-size: 20px;
}
.minNum {
  font-size: 12px;
}
.TitleStyle {
  padding: 2.5% 0;
  &:before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: #009588;
    margin-right: 8px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
}
.contentBoxTop {
  height: 90% !important;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  .markStyle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }
  P {
    position: relative;
    margin-bottom: 6%;
  }
  .contentBox {
    text-align: center;
  }
  .markTitle {
    margin-left: 10px;
  }
}
.salaryBox {
  padding-left: 20px;
}
.salaryDataBox {
  text-align: right;
  padding-right: 20px;
}
.markBg {
  background: #3f7eef;
}
.markBgO {
  background: #26bbff;
}
.markBgT {
  background: #52ffac;
}
.projectFigure {
  height: calc(100%);
  .statistic {
    height: calc(100%);
    top: -25px;
  }
}
.RealNameBox {
  width: 136px;
  margin-left: 21px;
  background: #1c405b;
  padding: 8px 11px;
}
.realNameProportion {
  margin-left: 21px;
  position: relative;
  margin-top: 8px;
}
.mLTen {
  margin-left: 10px;
}
.otherBg {
  height: calc(100% - 54px);
  background: url('../../../static/img/dataOverView/bg.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 8%;
  background-position: center center;
  text-align: center;
  position: relative;
  > div {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  }
  .otherPicSty {
    width: 70px;
    height: 60px;
    // margin: 8px 22px 0;
  }
}
.titleTip {
  color: #7a8b9b;
}

@media all and (min-height: 700px) and (max-height: 800px) {
  .commonHeightTop {
    // height:120px !important;
    margin-top: 0 !important;
  }
  .TitleStyle {
    padding: 10px 0 !important;
  }
  .comFontSize {
    font-size: 12px !important;
  }
  .TitleStyle {
    &::before {
      height: 10px !important;
    }
  }
  .contentBoxTop {
    p {
      margin-bottom: 12px !important;
    }
  }
  .maxNum {
    font-size: 14px !important;
  }
  .realNameProportion {
    margin-top: 0 !important;
  }
  .comSinFontSize {
    font-size: 12px !important;
  }
  .otherBg {
    height: calc(100% - 40px) !important;
    .otherPicSty {
      width: 50px !important;
      height: 50px !important;
      // margin:5px 0 0 !important;
    }
  }
}
@media screen and (max-width: 1366px) and (max-height: 768px) {
  .commonHeightTop {
    // height:120px !important;
    margin-top: 0 !important;
  }
  .TitleStyle {
    padding: 5px 0 !important;
  }
  .comFontSize {
    font-size: 12px !important;
  }
  .TitleStyle {
    &::before {
      height: 10px !important;
    }
  }
  .contentBoxTop {
    p {
      margin-bottom: 1% !important;
    }
  }
  .maxNum {
    font-size: 14px !important;
  }
  .realNameProportion {
    margin-top: 0 !important;
  }
  .comSinFontSize {
    font-size: 12px !important;
  }
  .otherBg {
    // margin: 0 4% !important;
    height: calc(100% - 30px) !important;
    .otherPicSty {
      width: 30px !important;
      height: 30px !important;
      // margin:1px 0 0 !important;
    }
  }
  .RealNameBox {
    padding: 0px 11px !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1300px) {
  .medSinSize {
    font-size: 12px !important;
  }
  .medMaxSize {
    font-size: 14px !important;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1680px) {
  .medSinSize {
    font-size: 12px !important;
  }
  .medMaxSize {
    font-size: 14px !important;
  }
}
</style>
